// 拖拽demo

import LittleTitle from "@/components/Title/littleTitle";
import { HTML5Backend } from "react-dnd-html5-backend";
import { DndProvider, DragPreviewImage, useDrag, useDrop } from "react-dnd";

import styled from "styled-components";
import { Container } from "./Container";

const Block = styled.div`
  width: 300px;
  height: 100px;
`;

const DragDemo = () => {
  var matchDrag = useDrag({
    type: "FILE",
  });
  var matchDrop = useDrop({
    accept: "FILE",
    drop: function (item, monitor) {
      console.log("dropped");
    },
  });


  return (
    <div>
      <LittleTitle title="拖拽测试" />

      {/* <Block ref={matchDrag[1]} style={{ background: "red" }} />

      <Block ref={matchDrop[1]} style={{ background: "blue" }} />

      <Block ref={matchDrop[1]} style={{ background: "grey" }} /> */}
      <Container />
    </div>
  );
};

export default DragDemo;
